<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>成绩折线图分析</title>
    <script src="js/echarts.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <style>
        /* 让表格单元格内容垂直居中 */
        .el-table .cell {
            display: flex;
            align-items: center;
        }

        /* 调整折线图高度，设置一个固定高度以确保能显示 */
        .student-chart {
            width: 100%;
            height: 300px;
            margin: -50px -100px -50px -120px;
        }
        .el-table .orange-row {
            background: #f2ebaf;
        }

        .el-table .light-green-row {
            background: #90ee90;
        }
        /* 缩小表单输入框和选择框的宽度 */
        .el-input, .el-select {
            width: 100px;
        }
    </style>
</head>

<body>
<div id="app">
    <el-dialog :visible.sync="dialogVisible" title="导入 Excel 文件">
        <el-form :model="uploadForm">
            <el-form-item label="Excel 文件">
                <el-upload
                        ref="upload"
                        action="#"
                        :show-file-list="false"
                        :before-upload="beforeUpload"
                        :on-success="handleUploadSuccess"
                        :on-error="handleUploadError">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
        </div>
    </el-dialog>


    <div id="list">
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="学生姓名">
                <el-input v-model="form.name" placeholder="学生名"></el-input>
            </el-form-item>
            <el-form-item label="作业类型">
                <el-select v-model="form.homeworkType" placeholder="请选择作业类型">
                    <el-option label="每日作业" value="每日作业"></el-option>
                    <el-option label="周测" value="周测"></el-option>
                    <el-option label="阶段测试" value="阶段测试"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="开始日期">
                <el-date-picker
                        v-model="form.startDate"
                        type="date"
                        placeholder="选择开始日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期">
                <el-date-picker
                        v-model="form.endDate"
                        type="date"
                        placeholder="选择结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="老师姓名">
                <el-input v-model="form.teacherName" placeholder="老师名"></el-input>
            </el-form-item>
            <el-form-item label="座位">
                <el-select v-model="form.seatIndex" placeholder="座位排数">
                    <el-option label="第1排" value="第1排"></el-option>
                    <el-option label="第2排" value="第2排"></el-option>
                    <el-option label="第3排" value="第3排"></el-option>
                    <el-option label="第4排" value="第4排"></el-option>
                    <el-option label="第5排" value="第5排"></el-option>
                    <el-option label="第6排" value="第6排"></el-option>
                    <el-option label="第7排" value="第7排"></el-option>
                    <el-option label="第8排" value="第8排"></el-option>
                    <el-option label="第9排" value="第9排"></el-option>
                    <el-option label="第10排" value="第10排"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="queryData">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="handleImportExcel">导入 excel 数据</el-button>
            </el-form-item>
        </el-form>
    </div>
    <el-table :data="currentStudents" style="width: 100%" :row-class-name="tableRowClassName">
       <!-- <el-table-column prop="id" label="编号" width="60"></el-table-column>-->
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="name" label="姓名" width="80"></el-table-column>
        <el-table-column prop="averageScore" label="平均分" width="80"></el-table-column>
        <el-table-column label="成绩折线图">
            <template slot-scope="scope">
                <div class="student-chart" :id="'chart_' + scope.row.id"></div>
            </template>
        </el-table-column>
    </el-table>
    <center>
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[3, 5, 10,100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="students.length">
        </el-pagination>
    </center>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            students: [],
            currentPage: 1,
            pageSize: 3,
            form: {
                name: '',
                homeworkType: '',
                startDate: '',
                endDate: '',
                teacherName: '',
                seatIndex: ''
            },
            dialogVisible: false,
            uploadForm: {
                excel: null
            }
        },
        computed: {
            currentStudents() {
                const start = (this.currentPage - 1) * this.pageSize;
                const end = start + this.pageSize;
                return this.students.slice(start, end);
            }
        },
        mounted() {
            this.getStudentData();
        },
        methods: {
            tableRowClassName({ rowIndex }) {
                //alert(rowIndex);
                if (rowIndex % 2 === 1) {
                    return 'orange-row';
                }
                if (rowIndex  % 2 === 0) {
                    return 'light-green-row';
                }
            },
            handleImportExcel() {
                this.dialogVisible = true;
            },
            beforeUpload(file) {
                this.uploadForm.excel = file;
                return false;
            },
            submitUpload() {
                const formData = new FormData();
                formData.append('excel', this.uploadForm.excel);
                axios.post('studentScore/insertByExcel', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                })
                    .then(response => {
                        this.$message({
                            type: 'success',
                            message: '上传成功'
                        });
                        this.dialogVisible = false;
                        this.queryData();
                    })
                    .catch(error => {
                        this.$message({
                            type: 'error',
                            message: '上传失败'
                        });
                        console.error('上传出错:', error);
                    });
            },
            handleUploadSuccess(response, file, fileList) {
                this.$message({
                    type: 'success',
                    message: '上传成功'
                });
                this.dialogVisible = false;
                this.queryData();
            },
            handleUploadError(error, file, fileList) {
                this.$message({
                    type: 'error',
                    message: '上传失败'
                });
                console.error('上传出错:', error);
            },
            // 备用  可以被合并的方法
            queryData() {
                const params = {
                    ...this.form,
                    page: this.currentPage,
                    pageSize: this.pageSize
                };
                axios.post('studentScore/listByPage', params)
                    .then(response => {
                        this.tableData = response.data.data.data;
                        this.total = response.data.data.total;
                    })
                    .catch(error => {
                        console.error('查询出错:', error);
                    });
            },
            // 主要方法 获取数据
            async getStudentData() {
                try {
                    const params = {
                        ...this.form,
                        page: this.currentPage,
                        pageSize: this.pageSize
                    };
                    const response = await axios.post('studentScore/listByPageAndEcharts',params);
                    //console.log('获取的数据:', response.data); // 打印获取的数据用于调试
                    this.students = response.data.data;
                    this.$nextTick(() => {
                        this.currentStudents.forEach(student => {
                            this.drawChart(student);
                        });
                    });
                } catch (error) {
                    console.error('数据获取出错:', error);
                }
            },
            drawChart(student) {
                const chartDom = document.getElementById('chart_' + student.id);
                console.log('chartDom:', chartDom); // 打印 chartDom 用于调试
                if (!chartDom) {
                    console.error('未找到对应的 DOM 元素');
                    return;
                }
                const myChart = echarts.init(chartDom);
                const option = {
                    xAxis: {
                        type: 'category',
                        data: student.scores.map(score => score.time),
                        axisLabel: {
                            // 旋转刻度标签，避免重叠
                            rotate: 0,
                            // 强制显示所有标签
                            interval: 0,
                            // 增大标签与轴线的距离
                            margin: 5
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: student.scores.map(score => score.score),
                            type: 'line'
                        }
                    ]
                };
                myChart.setOption(option);
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.$nextTick(() => {
                    this.currentStudents.forEach(student => {
                        this.drawChart(student);
                    });
                });
            },
            handleCurrentChange(newPage) {
                this.currentPage = newPage;
                this.$nextTick(() => {
                    this.currentStudents.forEach(student => {
                        this.drawChart(student);
                    });
                });
            }
        }
    });
</script>
</body>

</html>